<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('处方详情')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <style>
        .drug-item {
            border: solid thin #ddd;
            text-align: center;
            padding: 10px;
            margin: 5px 10px;
        }

        #scroll-pane-bottom {
            overflow-y: scroll;
            overflow-x: hidden;
        }

        .patient-info {
            margin: 5px 0px;
        }

        .hand {
            cursor: pointer;
        }

        .nostock {
            background-color: #f0e6e6;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12">
                <form class="form-horizontal m" id="form-records-add" th:object="${tPrescriptionRecords}">
                    <input name="id" th:field="*{id}" type="hidden">
                    <div class="form-group scroll-pane-top">
                        <div class="row patient-info">
                            <label class="col-sm-2 control-label is-required">姓名：</label>
                            <div class="col-sm-2">
                                <input name="name" th:field="*{name}" readonly
                                       class="form-control" type="text" required>
                            </div>

                            <label class="col-sm-2 control-label is-required">性别：</label>
                            <div class="col-sm-2">
                                <select name="sex" id="sex" class="form-control" readonly
                                        th:with="type=${@dict.getType('sys_user_sex')}" onchange="change()">
                                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                            th:value="${dict.dictValue}" th:field="*{sex}"></option>
                                </select>
                            </div>
                            <label class="col-sm-2 control-label is-required">年龄：</label>
                            <div class="col-sm-2">
                                <input name="age" th:field="*{age}" id="age" readonly
                                       class="form-control" type="number" required>
                            </div>
                        </div>
                        <div class="row patient-info">
                            <label class="col-sm-2 control-label">电话：</label>
                            <div class="col-sm-3">
                                <input name="phone" th:field="*{phone}" readonly
                                       class="form-control" type="text">
                            </div>

                            <label class="col-sm-2 control-label">身份证号：</label>
                            <div class="col-sm-3">
                                <input name="idNumber" th:field="*{idNumber}" readonly
                                       class="form-control" type="text"
                                       onchange="idNumber_change()">
                            </div>
                        </div>
                        <div class="row patient-info">
                            <label class="col-sm-2 control-label">诊断：</label>
                            <div class="col-sm-10">
                                <textarea name="diagnosis" class="form-control" readonly>[[*{diagnosis}]]</textarea>
                            </div>
                        </div>
                        <div class="row patient-info">
                            <label class="col-sm-2 control-label">皮试结果：</label>
                            <label class="col-sm-2 control-label">
                                <input name="skinTest" th:field="*{skinTest}" readonly
                                       class="form-control" type="text">
                            </label>
                        </div>
                    </div>
                    <div id="scroll-pane-bottom">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="col-sm-12" id="zsl-html"></div>
                                <div class="col-sm-12" id="fzsl-html"></div>
                                <div class="col-sm-12" id="qt-html"></div>
                                <div class="col-sm-12 select-table table-striped">
                                    <a name="cfxq"></a>
                                    <table id="bootstrap-table" data-use-row-attr-func="true"
                                           data-reorderable-rows="true"></table>
                                </div>
                            </div>
                        </div>
                        <div class="row" style="margin-top: 10px">
                            <div class="col-sm-12">
                                <div class="col-sm-9"></div>
                                <div id="zsje" class="col-sm-3" style="display: none">注射金额:</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="col-sm-9"></div>
                                <div id="ypje" class="col-sm-3" style="display: none">药品金额:</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="col-sm-9"></div>
                                <div id="zje" class="col-sm-3" style="display: none">总金额:</div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="col-sm-9"></div>
                                <div id="tkzje" class="col-sm-3" style="display: none">退款金额:</div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="row">
                <div class="col-sm-8">
                    <div class="col-sm-2">操作人</div>
                    <div class="col-sm-2">医生</div>
                    <div class="col-sm-2">药房</div>
                    <div class="col-sm-2">护士</div>
                </div>
            </div>
            <div class="row" th:object="${tPrescriptionRecords}">
                <div class="col-sm-8">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-2">[[*{doctorName}]]</div>
                    <div class="col-sm-2">[[*{pharmacyName}]]</div>
                    <div class="col-sm-2">[[*{nurseName}]]</div>
                </div>
            </div>
            <div class="row" style="text-align: center;margin: 20px">
                <div class="col-sm-12">
                    <button class="btn btn-primary" type="button" style="margin:5px 12px;"
                            onclick="yifayao_clicked()">已发药
                    </button>
                    <button class="btn btn-danger" type="button" style="margin:5px 12px;" th:if="${dingdanfanhui}"
                            onclick="delete_clicked()">订单退回
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:src="@{/js/common.js}"></script>
<script th:inline="javascript">
    let prefix = ctx + "system/history"

    let mode = [[${mode}]];
    // 是否为详情页面
    let isDetail = mode == "detail";
    // 禁用的属性内容
    let readonlyStr = isDetail ? "readonly" : ""
    // 药品分类
    let drugTypes = [[${@dict.getType('sys_drug_type')}]];
    // 注射类的子类
    let business_zsl = [[${@dict.getType('business_zsl')}]];
    // 非注射类的子类
    let business_fzsl = [[${@dict.getType('business_fzsl')}]];
    // 其他类的子类
    let business_qt = [[${@dict.getType('business_qt')}]];

    $("#form-records-add").validate({
        focusCleanup: true
    });

    $("input[name='crtime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    // 处方的药品信息
    var chufang_drugs = [[${tPrescriptionRecords.tPrescriptionDrugInfoList}]] || [];
    chufang_drugs.forEach(item => {
        item.refundAmount = 0;
    })
    console.log("chufang_drugs", chufang_drugs)
    var options = {
        id: "bootstrap-table",
        pagination: false,
        showSearch: false,
        showRefresh: false,
        showToggle: false,
        showColumns: false,
        sidePagination: "client",
        onReorderRow: function (data) {
            //当拖拽结束后，data为整个表格的数据
            // 当sidePagination: "server"时，拖拽行后顺序错乱，需要重新调用加载数据方法
            chufang_drugs = data;
            refresh_tabledata();
            return false;
        },
        columns: [
            {
                field: 'drugName',
                align: 'center',
                title: '名称',
                visible: true,
            },
            {
                field: 'drugType',
                align: 'center',
                title: '分类',
                visible: true,
                formatter: function (value, row, index) {
                    return $.table.selectDictLabel(drugTypes, value);
                }
            },
            {
                field: 'drugPrice',
                align: 'center',
                title: '零售价',
                visible: true,
            },
            {
                field: 'drugSpecs',
                align: 'center',
                title: '规格',
                visible: true,
            },
            {
                field: 'counts',
                align: 'center',
                title: '用药数量',
                width: 40,
                visible: true,
            },
            {
                field: 'days',
                align: 'center',
                title: '用药天数',
                width: 40,
                visible: true,
            },
            {
                field: 'over_days',
                align: 'center',
                title: '已用药天数',
                visible: true,
            },
            {
                field: 'amount',
                align: 'center',
                title: '合计金额',
                visible: true,
            },
            {
                field: 'remarks',
                align: 'center',
                title: '备注',
                width: 80,
                visible: true,
            },
        ],
    };

    $(function () {
        $.table.init(options);
        refresh_tabledata();
        updateZje()

        $("input[evnt='changeDays']").keydown(function (event) {
            if (event.keyCode == 13) {
                setAllDays();
            }
        });

        $("#scroll-pane-bottom").css("max-height", (window.screen.availHeight - 374) + "px");
    });


    function refresh_tabledata() {
        $("#bootstrap-table").bootstrapTable("load", chufang_drugs);
    }

    // 处方总金额
    let total_amount = [[${tPrescriptionRecords.totalAmount}]];

    // 更新总金额
    function updateZje() {
        total_amount = 0;
        chufang_drugs.forEach(a => {
            total_amount += a.amount;
        });
        $("#zje").css("display", "block").text("总金额：" + total_amount);
    }

    function idNumber_change() {
        let value = event.target.value.trim();
        if (value.length != 18)
            return;

        let birthday = value.substr(6, 8)
        let year = birthday.substr(0, 4)
        let month = birthday.substr(4, 2)
        let day = birthday.substr(6, 2)
        let birthdate = new Date(year, month - 1, day)
        var age = Math.floor((new Date() - birthdate) / (1 * 24 * 60 * 60 * 1000) / 365);
        $("#age").val(age)
    }


    // 点击已发药按钮
    function yifayao_clicked() {
        let hasps = [[${tPrescriptionRecords.hasps}]] == 1;
        let haszsl = chufang_drugs.filter(a => a.drugType == "business_zsl")
        let status = '3';
        if (hasps || haszsl.length > 0)
            status = '2';
        post("/yifayao", {
            id: [[${tPrescriptionRecords.id}]],
            status: status,
            pharmacyid: [[${pharmacyid}]]
        }, function (res) {
            $.modal.alertSuccess(res.msg);
            $.modal.close();
        })
    }

    // 点击删除订单按钮
    function delete_clicked() {
        $.modal.confirm("确定要移除该处方？", function () {
            post("/updatePrescription", {
                id: [[${tPrescriptionRecords.id}]],
                is_delete: 1,
                pharmacyid: [[${pharmacyid}]]
            }, function (res) {
                $.modal.alertSuccess(res.msg);
                $.modal.close();
            })
        })
    }

    function post(url, data, success) {
        $.ajax({
            url: prefix + url,
            type: 'post',
            data: data,
            dataType: 'json',
            success: success,
        })
    }

</script>
</body>
</html>